<template>
  <div class="box">
    <el-scrollbar>
      <div class="box-content">
        <div class="title"><span>1</span>. {{ plugin.lang('config.one.title') }}</div>
        <div class="body">{{ plugin.lang('config.one.body') }}</div>
        <div class="tax" v-if="tax">
          <div class="title">{{ tax.territory }}</div>
          <div class="body">{{ tax.issuer.tax_number }}</div>
          <div class="body">{{ tax.issuer.legal_name }}</div>
        </div>
        <el-form ref="formRef" :model="form" :rules="rules" label-position="top">
          <el-form-item :label="plugin.lang('config.api_key')" prop="api_key">
            <el-input v-model="form.api_key"></el-input>
          </el-form-item>
          <el-form-item :label="plugin.lang('config.api_secret')" prop="api_secret">
            <el-input v-model="form.api_secret"></el-input>
          </el-form-item>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item :label="plugin.lang('config.series_print')" prop="series.print">
                <el-input v-model="form.series.print"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="plugin.lang('config.series_print_refund')" prop="series.print_refund">
                <el-input v-model="form.series.print_refund"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="plugin.lang('config.series_ticket')" prop="series.ticket">
                <el-input v-model="form.series.ticket"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="plugin.lang('config.series_ticket_refund')" prop="series.ticket_refund">
                <el-input v-model="form.series.ticket_refund"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item :label="plugin.lang('config.pos_auto')">
            <div style="width: 100%; overflow: hidden">
              <el-select v-model="form.pos_auto" style="width: 100%">
                <el-option v-for="(value, key) in plugin.langTm('config.pos_auto_text')" :value="key" :label="value" :key="key"></el-option>
              </el-select>
            </div>
          </el-form-item>
        </el-form>
        <el-button type="primary" size="large" :loading="loading" @click="onUpdate" style="width:100%">{{ plugin.lang('config.update') }}</el-button>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import { ref } from 'vue';
import app from '@/app'
import model from '../../model'

export default {
  setup() {
    // 表单
    const tax = model.tax
    const form = ref({
      series: {}
    })
    const formRef = ref()
    
    // 验证
    const rules = {
      api_key: [
        { required: true, message: ' ', trigger: 'blur' }
      ],
      api_secret: [
        { required: true, message: ' ', trigger: 'blur' }
      ],
      'series.print': [
        { required: true, message: ' ', trigger: 'blur' }
      ],
      'series.print_refund': [
        { required: true, message: ' ', trigger: 'blur' }
      ],
      'series.ticket': [
        { required: true, message: ' ', trigger: 'blur' }
      ],
      'series.ticket_refund': [
        { required: true, message: ' ', trigger: 'blur' }
      ]
    }

    // 获取数据
    const getData = () => {
      model.get().then(res => {
        form.value = res
        app.ui.loading()
        model.getTax().then(() => {
          model.getSigner()
          model.getClient()
        }).finally(() => app.ui.loadingClose())
      })
    }
    

    // 更新
    const loading = ref(false)
    const onUpdate = () => {
      formRef.value.validate(valid => {
        if (valid) {
          loading.value = true
          model.update(form.value).then(() => {
            getData()
          }).finally(() => {
            loading.value = false
          })
        }
      })
    }

    getData()

    return {
      plugin: app.plugin.index,
      formRef,
      tax,
      form,
      rules,
      loading,
      onUpdate
    }
  }
}
</script>